<!-- START panel-->
<div class="panel" style="padding:20px;padding-bottom:0">
	<div class="panel-body">
		<p class="head-p">人员管理</p>
		<div class="row">
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="showEditAccount('new')">添加</button>
			</div>
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="showEditAccount('edit')">编辑</button>
			</div>
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="activateAccount('activate')">激活</button>
			</div>
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="activateAccount('frozen')">冻结</button>
			</div>
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="destoryAccount()">删除</button>
			</div>
			<div class="col-lg-2 col-xs-6">
				<button class="btn btn-default btn-block btn-color" (click)="resetPwd()">重置密码</button>
			</div>
		</div>
		<div style="border-top:2px solid #E3F7FC;width:100%;margin-top:20px"></div>
		<!-- START table-responsive-->
		<div class="table-responsive" style="min-height:360px">
			<table class="table  table-hover table-striped table-bordered">
				<thead>
					<tr>
						<th checkAll>
							<div class="checkbox c-checkbox" *ngIf="tabledatas.childAccountInfo.length>0">
								<label>
										<input type="checkbox" />
										<span class="fa fa-check"></span>
                            		</label>
							</div>
						</th>
						<th>账号</th>
						<th>名称</th>
						<th>邮箱</th>
						<th>手机</th>
						<th>角色</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody #accountInput>
					<tr *ngFor="let accountList of tabledatas.childAccountInfo">
						<td>
							<div class="checkbox c-checkbox">
								<label>
                                <input type="checkbox" name="account" [id]="accountList.userId" [value]="accountList.account"/>
                                <span class="fa fa-check"></span>
                            </label>
							</div>
						</td>
						<td>{{accountList.account}}</td>
						<td>{{accountList.userName}}</td>
						<td>{{accountList.email}}</td>
						<td>{{accountList.mobile}}</td>
						<td>{{accountList.userTypeName}}</td>
						<td [class]="accountList.state==='1'?'text-danger':'text-muted'">{{accountList.stateName}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!--分页-->
		<div class="text-right">
			<pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="config.page" [totalItems]="config.length" [itemsPerPage]="config.itemsPerPage"
			 [maxSize]="config.maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="pageChanged($event)" (numPages)="numPages = $event"
			 [firstText]="config.firstText" [previousText]="config.previousText" [nextText]="config.nextText" [lastText]="config.lastText">
			</pagination>
		</div>
	</div>
</div>
<!-- modal start -->
<div class="modal fade" bsModal #editAccountModal="bs-modal" [config]="{backdrop: false}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
 aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" aria-label="Close" (click)="editAccountModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
				<h4 class="modal-title">{{displayMsg.header}}</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" (ngSubmit)="editAccount(editAccountInfo.newOrEdit)" #accountSubmit="ngForm">
					<div class="form-group">
						<label for="acccustName" class="col-sm-4 control-label">所属客户:</label>
						<div class="col-md-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.custName" name="acccustName" disabled>
						</div>
					</div>
					<div class="form-group">
						<label for="accAccount" class="col-sm-4 control-label">账号:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.account" name="accAccount" maxLength="32"
							(keyup)="editAccountInfo.account=this.regularType('account', $event.target.value)" required placeholder="账号仅限字母、数字及下划线!"
							 [disabled]="editAccountInfo.newOrEdit === 'edit'" (blur)="existAccount(editAccountInfo.account)">
							<h5  class="text-info" style="margin-top:15px;margin-bottom:0">默认密码为：账号+123！@#</h5>
							<h5 [hidden]=regularForm.account class="text-danger" style="margin-top:15px;margin-bottom:0">账号已存在!</h5>
						</div>
					</div>
					<div class="form-group">
						<label for="accUserName" class="col-sm-4 control-label">姓名:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.userName" name="accUserName"  maxLength="12" required placeholder="请输入姓名!">
						</div>
					</div>
					<div class="form-group">
						<label for="accEmail" class="col-sm-4 control-label">邮箱:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" (input)="regularInput('accEmail')" [(ngModel)]="editAccountInfo.email" name="accEmail"
							 #accEmail required placeholder="请输入正确可用的邮箱!">
							<h5 [hidden]=regularForm.email class="text-danger" style="margin-top:15px;margin-bottom:0">邮箱格式错误!</h5>
						</div>
					</div>
					<div class="form-group">
						<label for="accMobile" class="col-sm-4 control-label">手机:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.mobile" name="accMobile" maxLength="20" 
							(keyup)="editAccountInfo.mobile=this.regularType('accMobile', $event.target.value)" placeholder="请输入手机号码!" required>
						</div>
					</div>
					<div class="form-group">
						<label for="accTelephone" class="col-sm-4 control-label">电话:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.telephone" name="accTelephone" maxLength="20"
							(keyup)="editAccountInfo.telephone=this.regularType('accMobile', $event.target.value)" placeholder="请输入电话号码!">
						</div>
					</div>
					<div class="form-group">
						<label for="accRemark" class="col-sm-4 control-label">备注:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" [(ngModel)]="editAccountInfo.remark" name="accRemark" maxLength="200"> 
						</div>
					</div>
					<div class="form-group">
						<label for="accUserType" class="col-sm-4 control-label">权限:</label>
						<div class="col-md-6">
							<ng-select [(ngModel)]="editAccountInfo.userType" #accUserType name="accUserType" placeholder="--选择权限--" [required]="true">
							</ng-select>
						</div>
					</div>
					<div class="form-group text-right">
						<div class="col-sm-offset-6 col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" type="button" (click)="editAccountModal.hide()">取消</button>
						</div>
						<div class="col-sm-2">
							<button class="mb-sm btn btn-primary btn-outline" [disabled]="!(accountSubmit.form.valid&&regularForm.email&&regularForm.account)"
							 type="submit">{{displayMsg.confirmBtn}}</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- modal end -->